<template>
  <div class="container">
    <div class="container-item">
      <div class="container-item-top">
        <h1>{{ title }}</h1>

        <div class="search-container">
          <img src="@/assets/search.png" alt="搜索" class="search-icon" @click="searchInfo"/>
          <input class="container-item-sechar" type="text" placeholder="搜索.." v-model="nexusToolLibrary.titleName" @keyup.enter="searchInfo" />
        </div>
      </div>

      <div class="item-nav-box">
        <div class="container-nav">
          <div
            class="nav-item"
            v-for="item in navCategoryList"
            :key="item.id"
            @click="clickNav(item.id)"
          >
            {{ item.name }}
          </div>
        </div>

        <div class="container-item-button">
          <div class="card" @click="clickCard(item.id)" v-for="item in libraryList" :key="item.id">
            <div class="card-header" v-random-bg>
              <img :src="item.logoImageUrl" alt="" />
            </div>

            <div class="card-content">
              <h3>{{ item.titleName }}</h3>
              <p>{{ item.description }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <FeatureSectionLogo />
</template>

<script setup lang="ts">
import FeatureSectionLogo from "@/components/FeatureSectionLogo.vue";
import { useRoute, useRouter } from "vue-router";
import { computed, onMounted, ref } from "vue";
import { getLibrary,getLibraryListAPI } from "@/api/nexusSphere/librarypage.js";
import { getNexusNavCategory, getNexusNavCategoryList } from "@/api/nexusSphere/navCategory.js";
import { useLibraryPage } from "@/stores/libraryPage";

interface NacCategory {
  id: number;
  name: string;
}

interface LibraryItem {
  id: number;
  titleName: string;
  description: string;
  logoImageUrl: string;
}

interface libraryInterface {
  categoryId: number;
  titleName: string;
}

const router = useRouter();
const route = useRoute();

const libraryList = ref<LibraryItem[]>([]);
const navCategoryList = ref<NacCategory[]>([]);
const nexusToolLibrary = ref<libraryInterface>({
  categoryId: 0,
  titleName: "",
});
const getList = async () => {
  const idParam = route.params.id;

  // 显式转换 idParam 为 number 类型，并做类型校验
  let id: number | null = null;

  if (typeof idParam === "string") {
    const parsedId = parseInt(idParam, 10);
    if (!isNaN(parsedId)) {
      id = parsedId;
    }
  } else if (typeof idParam === "number") {
    id = idParam;
  }

  if (id === null) {
    console.error("无效的 ID 参数");
    return;
  }

  nexusToolLibrary.value.categoryId = id;  

  const res = await getLibraryListAPI(nexusToolLibrary.value);
  const res2 = await getNexusNavCategory(id);
  libraryList.value = res.data.data;
  navCategoryList.value = res2.data.data;
};

const clickNav = async (id: number) => {
  const res = await getNexusNavCategoryList(id);
  libraryList.value = res.data.data;
};

const clickCard = (id: number) => {
  // router.push(`/appIntroduction/${id}`);
  window.open(`/appIntroduction/${id}`);
};

const searchInfo = () => {
  getList();
}

const libraryPage = useLibraryPage();
const title = computed(() => libraryPage.title);
onMounted(() => {
  const title = decodeURIComponent((route.query.title as string) || "默认标题");
  libraryPage.setTitle(title);
  getList();
});
</script>

<style scoped lang="scss">
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
  height: 100%;
}

.container {
  display: flex;
  background-color: #f2f3f5;
  flex-direction: column;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
  padding: 20px;
  height: 100%;

  .container-item {
    .container-item-top {
      display: flex;
      width: 100%;
      height: 100px;
      text-align: center;
      flex-direction: row;
      justify-content: space-between;
      line-height: 100px;
      align-items: center;

      h1 {
        text-align: center;
        align-content: center;
        margin-left: 30px;
      }

      .search-container {
        position: relative;
        width: 200px;
        margin-right: 41px;

        .search-icon {
          position: absolute;
          left: 10px;
          top: 52%;
          transform: translateY(-50%);
          width: 16px;
          height: 16px;
          z-index: 1;
          cursor: pointer;
        }

        .container-item-sechar {
          background-color: #fff;
          width: 100%;
          height: 30px;
          border-radius: 10px;
          border: none;
          padding-left: 30px; /* 为logo留出空间 */

          &.no-border {
            outline: none;
          }
        }
      }

      // .container-item-sechar {
      //   background-color: #fff;
      //   width: 200px;
      //   height: 24px;
      //   border-radius: 10px;
      //   margin-right: 5px;
      //   border: none;

      //   &.no-border {
      //     outline: none; /* 聚焦时无轮廓 */
      //   }
      // }
    }

    .item-nav-box {
      display: flex;

      .container-nav {
        width: 220px;
        height: 100%;
        border-radius: 10px;

        background-color: #fff;
        text-align: center;

        .nav-item {
          height: 50px;
          // background-color: pink;
          line-height: 50px;

          &:not(:first-child) {
            border-top: solid 2px #fafafa;
          }

          &:hover {
            animation: navItemHoverEffect 0.3s forwards; /* 触发动画 */
          }
        }

        // 定义 @keyframes 动画
        @keyframes navItemHoverEffect {
          0% {
            transform: scale(1);
            background-color: transparent;
            border-radius: 10px;
            color: #000;
          }
          100% {
            transform: scale(1.1); /* 放大 10% */
            border-radius: 10px;
            background-color: #c0c4cc; /* 鼠标悬停时的背景颜色 */
            color: #fff; /* 鼠标悬停时的文本颜色 */
          }
        }
      }

      .container-item-button {
        display: flex;
        margin-left: 30px;
        flex-wrap: wrap;
        background-color: #fff;
        border-radius: 20px;
        justify-content: center;
        width: 100%;

        .card {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          // background-color: pink;
          h3 {
            font-weight: 400;
            text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
            white-space: nowrap; /* 不换行 */
            overflow: hidden; /* 隐藏溢出的内容 */
          }

          p {
            color: #909399;
            text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
            white-space: nowrap; /* 不换行 */
            overflow: hidden; /* 隐藏溢出的内容 */
          }

          .card-content {
            text-align: justify;
            margin-left: 20px;
            width: 250px;
            // 123456
          }

          .card-header {
            margin-top: 10px;
            width: 250px;
            height: 130px;
            border-radius: 20px;
            background: linear-gradient(to right, #2e3192, #1bffff);
            display: flex;
            justify-content: center;
            align-items: center;
            transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s; /* 添加过渡效果 */

            img {
              width: 50px;
              height: 50px;
              transition: transform 0.3s; /* 添加过渡效果 */
            }
          }

          &:hover {
            animation: combinedEffect 0.3s forwards;
          }

          &:hover img {
            // transform: scale(3.0); /* 放大 20% */
            transform: scale(1.3) rotate(15deg);
            height: 55px;
            width: 55px;
          }
        }
      }
    }
  }
}
</style>
